// 智能办公整体背景样式
// 符合智能办公场景的渐变背景色

// 主背景色 - 智能办公蓝灰色调
$office-bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
$office-bg-secondary: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
$office-bg-accent: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);

// 智能办公整体布局背景
.app-wrapper {
  background: $office-bg-primary;
  min-height: 100vh;
  position: relative;
  
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(24, 144, 255, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(82, 196, 26, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(250, 140, 22, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
}

// 主容器背景
.main-container {
  background: $office-bg-secondary;
  position: relative;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      linear-gradient(90deg, transparent 0%, rgba(24, 144, 255, 0.02) 50%, transparent 100%);
    pointer-events: none;
  }
}

// 应用主区域背景
.app-main {
  background: $office-bg-secondary;
  position: relative;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 10% 20%, rgba(24, 144, 255, 0.02) 0%, transparent 50%),
      radial-gradient(circle at 90% 80%, rgba(82, 196, 26, 0.02) 0%, transparent 50%);
    pointer-events: none;
  }
}

// 应用容器背景
.app-container {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(24, 144, 255, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 16px;
  position: relative;
  z-index: 2;
  
  &:hover {
    box-shadow: 0 8px 32px rgba(24, 144, 255, 0.12);
  }
}

// 侧边栏背景优化
.sidebar-container {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right: 1px solid rgba(24, 144, 255, 0.15);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 10;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(24, 144, 255, 0.02) 0%, transparent 100%);
    pointer-events: none;
  }
}

// 标签视图背景
.tags-view-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(24, 144, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

// 卡片组件背景优化
.el-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(24, 144, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(24, 144, 255, 0.15);
  }
  
  .el-card__header {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(24, 144, 255, 0.1);
    border-radius: 16px 16px 0 0;
  }
}

// 表格背景优化
.el-table {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  .el-table__header-wrapper {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
  }
  
  .el-table__body-wrapper {
    background: rgba(255, 255, 255, 0.8);
  }
}

// 表单背景优化
.el-form {
  .el-form-item {
    .el-input__inner,
    .el-textarea__inner {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(24, 144, 255, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }
  }
}

// 按钮背景优化
.el-button {
  border-radius: 8px;
  transition: all 0.3s ease;
  
  &.el-button--primary {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(24, 144, 255, 0.4);
      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
    }
  }
}

// 对话框背景优化
.el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  .el-dialog__header {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(24, 144, 255, 0.02) 100%);
    border-bottom: 1px solid rgba(24, 144, 255, 0.1);
  }
  
  .el-dialog__body {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
  }
}

// 下拉菜单背景优化
.el-dropdown-menu {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(24, 144, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

// 消息提示背景优化
.el-message {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(24, 144, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

// 加载遮罩背景优化
.el-loading-mask {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    margin: 8px;
    border-radius: 12px;
  }
  
  .el-card {
    border-radius: 12px;
  }
}

// 暗色模式支持
@media (prefers-color-scheme: dark) {
  .app-wrapper {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
  }
  
  .main-container {
    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  }
  
  .app-container {
    background: rgba(45, 55, 72, 0.8);
    border: 1px solid rgba(24, 144, 255, 0.2);
  }
  
  .el-card {
    background: rgba(45, 55, 72, 0.9);
    border: 1px solid rgba(24, 144, 255, 0.2);
  }
} 